<template>
  <div class='channel-container'>
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
      <van-button class="edit-btn" type="danger" size="mini" plain round @click="isEdit = !isEdit">
        {{isEdit ? '完成' : '编辑'}}
      </van-button>
    </van-cell>
    <!-- 我的频道列表 -->
    <van-grid :gutter="10" class="channel-grid">
      <van-grid-item v-for="(value, index) in myChannels" :key="index"
        @click="onMyChannelClick(value,index)">
        <van-icon v-show="isEdit && !fixedChannel.includes(value.id)" name="clear" slot="icon">
        </van-icon>
        <span slot="text" class="text" :class="{active : index == active}">{{value.name}}</span>
      </van-grid-item>
    </van-grid>
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <!-- 我的频道推荐 -->
    <van-grid :gutter="10" class="my-grid" direction="horizontal">
      <van-grid-item v-for="(value, index) in recommentChannels" :key="index" :text="value.name"
        icon="plus" @click="onAddChannels(value, index)" />
    </van-grid>
  </div>
</template>
<script>
import { getAllChannels, setUserChannels, delUserChannels } from '@/api/channel.js';
import { mapState } from 'vuex';
import { setItem } from '@/utils/storage.js';
export default {
  name: 'channelPage',
  components: {},
  props: {
    myChannels: {
      type: Array,
      require: true,
    },
    active: {
      type: Number,
      require: true,
    },
  },
  data() {
    return {
      allChannels: [], // 所有频道列表
      isEdit: false, // 控制编辑状态
      fixedChannel: [0], // 需要固定不变的频道列表
    };
  },
  created() {
    this.getAllChannels();
  },
  computed: {
    ...mapState(['user']),
    // 频道推荐(方法一)
    // 计算属性会检测数据的变化,如果内部依赖的数据发生变化,则计算属性会重新执行
    recommentChannels() {
      let newChannels = [];
      this.allChannels.forEach((channel) => {
        let flag = this.myChannels.find((mychannel) => {
          return mychannel.id == channel.id;
        });
        if (!flag) {
          newChannels.push(channel);
        }
      });
      return newChannels;
    },
    // 频道推荐(方法二)
    recommentChannels1() {
      // filter:遍历数组,将符合条件的元素组成一个新的数组返回
      return this.allChannels.filter((channels) => {
        // find:遍历数组,将符合条件的第一个元素返回
        return !this.myChannels.find((mychannel) => {
          return mychannel.id == channels.id;
        });
      });
    },
  },
  methods: {
    getAllChannels() {
      getAllChannels()
        .then((res) => {
          console.log(res);
          this.allChannels = res.channels;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onAddChannels(value) {
      this.myChannels.push(value);
      // 频道持久化存储
      if (this.user) {
        // 已登录 调用接口
        setUserChannels({
          id: value.id,
          seq: this.myChannels.length,
        })
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 未登录 存储本地
        setItem('TOUTIAO_CHANNEL', this.myChannels)
      }
    },
    onMyChannelClick(value, index) {
      console.log(value);
      if (this.isEdit) {
        // 如果是编辑状态 删除频道
        // 1.如果是推荐频道 不删除
        if (this.fixedChannel.includes(value.id)) {
          return;
        }
        // 2.删除频道
        this.myChannels.splice(index, 1);
        // 3.判断所删除的频道是否在激活频道之前
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true);
        }
        // 4.持久化存储
        if(this.user) {
          // 已登录
          delUserChannels(value).then(res => {
            console.log(res);
          }).catch(err => {
            console.log(err);
          })
        }else {
          // 未登录
          setItem('TOUTIAO_CHANNEL', this.myChannels)
        }
      } else {
        // 非编辑状态 进入频道
        // 子父传参 使用自定义事件
        this.$emit('update-active', index, false);
      }
    },
  },
};
</script>
<style lang='less' scoped>
.channel-container {
  .van-cell {
    align-items: center;
    line-height: unset;
    margin-bottom: 20px;
  }
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 85px;
    height: 40px;
  }
  /deep/ .van-grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      background-color: #f4f5f6;
      white-space: nowrap; // 不换行
      font-size: 28px;
      color: #222;
      position: relative;
      .van-grid-item__text {
        margin-top: 0;
        font-size: 28px;
      }
      .title-text {
        font-size: 28px;
        color: #222;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
        .van-icon-clear {
          font-size: 35px;
          position: absolute;
          right: -10px;
          top: -10px;
          color: #ccc;
          z-index: 2;
        }
      }
    }
  }
  /deep/ .my-grid {
    .van-grid-item__icon {
      font-size: 24px;
    }
  }
}
</style>
